<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/static}">
<title>alpinejs样例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />


<script type="text/javascript" th:src="@{/common/alpinejs/alpinejs-3.14.8.min.js}"></script>

</head>
<body>
	<p>
		<a href=" https://www.alpinejs.cn"> 中文官网：https://www.alpinejs.cn</a>
	</p>
	<div x-data="{ open: false }">
		<div>下拉菜单（Dropdown）/模态弹窗（Modal）</div>
		<button @click="open = true">Open Dropdown</button>

		<ul x-show="open" @click.away="open = false">Dropdown Body
		</ul>
	</div>
	-------------------------------------------------------------------------------------------
	<div x-data="{ tab: 'foo' }">
		<div>标签页 Tabs</div>
		<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
		<button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

		<div x-show="tab === 'foo'">Tab Foo</div>
		<div x-show="tab === 'bar'">Tab Bar</div>
	</div>
	-------------------------------------------------------------------------------------------
	<div x-data="{ open: false }">
		<div>鼠标悬停时从服务器预加载下拉菜单中的 HTML 内容。</div>
		<button
			@mouseenter.once="
            fetch('demo/add')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
			@click="open = true">Show Dropdown</button>

		<div x-ref="dropdown" x-show="open" @click.away="open = false">
			Loading Spinner...</div>
	</div>
	-------------------------------------------------------------------------------------------
	<div x-data="{ open: false }">
		<div>显示</div>
		<button @click="open = true">Expand</button>

		<span x-show="open"> Content... </span>
	</div>
	-------------------------------------------------------------------------------------------
	<div x-data="{...dropdown(), ...tabs()}">
		<div>你也可以通过对象解构语法，把多个数据对象混合起来：</div>
		<button @click="toggle()">切换显示div</button>
		<div x-show="show" x-text="aaa">987654321</div>
	</div>
-------------------------------------------------------------------------------------------
<div>
<div>共有 14 个指令</div>
<table>
<tr><td>指令</td><td>	描述</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-data">x-data</a></td><td>		定义一个新的组件作用域。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-init">x-init</a></td><td>		组件初始化时运行其中的表达式。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-show">x-show</a></td><td>		根据表达式结果（true 或 false）控制元素的 display: none;（译者注：控制模块显示/隐藏）</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-bind">x-bind</a></td><td>		将当前属性的值设定为指令中表达式的结果。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-on">x-on</a></td><td>		向元素上挂载事件监听器。当事件触发时执行其中的表达式。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-model">x-model</a></td><td>		向当前元素新增「双向数据绑定」。保持输入元素与组件数据同步。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-text">x-text</a></td><td>		和 x-bind 类似，但更新的是元素的 innerText。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-html">x-html</a></td><td>		和 x-bind 类似，但更新的是元素的 innerHTML。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-ref">x-ref</a></td><td>		在组件外获取原始 DOM 元素的简便方法。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-if">x-if</a></td><td>		值为 false 时将从 DOM 中完全移除元素。需要在 template 标签中使用。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-for">x-for</a></td><td>		为数组中的每一项创建一个新的 DOM 节点。需要在 template 标签中使用。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-transition">x-transition</a></td><td>		用于在过渡（CSS Translation）的各个阶段中为元素添加 class 的指令。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-spread">x-spread</a></td><td>		为了更好的复用，可以绑定一个带有 Alpine 指令（作为 key）的对象到元素上。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#x-cloak">x-cloak</a></td><td>		这一属性会在 Alpine 初始化完成后被移除，可以用来隐藏未初始化的 DOM。</td></tr>
</table>
</div>

-------------------------------------------------------------------------------------------
<div>
<div>6 个魔法属性：</div>
<table>
<tr><td>魔法属性</td><td>	描述</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#el">$el</a></td><td>	获取根元素的 DOM 节点。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#refs">$refs</a></td><td>	获取组件中标记有 x-ref 的 DOM 元素。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#event">$event</a></td><td>	在事件监听器中获取浏览器原生的「Event」对象。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#dispatch">$dispatch</a></td><td>	创建一个「CustomEvent」并使用其内部的 .dispatchEvent() 方法进行分发。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#nexttick">$nextTick</a></td><td>	在 Alpine 做出响应式 DOM 更新后，执行一个给出的表达式。</td></tr>
<tr><td><a href="https://www.alpinejs.cn/#watch">$watch</a></td><td>	当监听的组件属性发生变化时，触发给定的回调函数。</td></tr>
</table>
</div>

-------------------------------------------------------------------------------------------
</body>
<script>
function dropdown(){
	return {
		show: false,
        toggle() {this.show = !this.show},
	    close() { this.show = false },
	    isShow() { return this.show === true }
	}
}
function tabs(){
	return {
		aaa: "显示x-text的值"
	}
}
   
</script>
</html>